<template>
  <div class="line" style="height:350px;width:550px"/>
</template>

<script>
import echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme

export default {
  props: ['numberData','smooth'],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'line')
    //   console.log(this.numberData)
      let nameArr=[],valueArr=[]
      this.numberData.forEach((item,index) => {
          nameArr[index]=item.name
          valueArr[index]=item.value
      });
    console.log(nameArr,valueArr)
      this.chart.setOption({
    xAxis: {
        type: 'category',
        data: nameArr
    },
    yAxis: {
        type: 'value'
    },
    grid: {
        bottom: '25%',
        top: '15%',
        left: '10%',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [{
        
        data: valueArr,
        type: 'line',
        smooth: this.smooth||false
    }]
})
    }
  }
}
</script>
